<template>
  <div class="left">
    <div
      class="tuijian"
      v-for="(item,index) in cityTravel"
      :key="index"
      @mouseenter="activeList(index)"
      @mouseleave="deactiveList()"
    >
      <div class="tuijian_list">
        <span>{{item.type}}</span>
        <span class="iconfont icon-arrow-right"></span>
      </div>
      <div class="city" :class="{'active':index===cityIndex}">
        <div v-for="(item,index) in item.children" :key="index">
          <span class="city_list">
            <span class="number">{{index+1}}</span>
            <!-- 点击切换不同城市数据 -->
            <span class="itemCity" @click="getPosts(item.city)">{{item.city}}</span>
            <!-- <nuxt-link :to="`/post?city=${item.city}`" class="itemCity">{{item.city}}</nuxt-link> -->
          </span>
          <a href="#">
            <span class="city_introduce">{{item.desc}}</span>
          </a>
        </div>
      </div>
    </div>
    <div class="leftImg">
      <h4>推荐城市</h4>
      <a href="#">
        <img src="http://157.122.54.189:9093/images/pic_sea.jpeg" alt />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: ["cityTravel"],
  data() {
    return {
      cityIndex: -1,
      type: "", //主题类型
      children: [] //城市列表
    };
  },
  // 组件复用时调用路由守卫
  mounted() {},
  methods: {
    activeList(index) {
      this.cityIndex = index;
    },
    deactiveList() {
      this.cityIndex = -1;
    },
    // 切换城市方法
    getPosts(city) {
      this.$router.push({
        path: "/post",
        query: { city }
      });
      // console.log(city);
      // 保存到vuex的store中
      this.$store.commit("post/getPostCity", city);
    }
  }
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}
.left {
  position: relative;
  width: 260px;
  background: #fff;
  .tuijian {
    .tuijian_list {
      height: 40px;
      line-height: 40px;
      border: 1px solid #ddd;
      border-collapse: collapse;
      padding-left: 20px;
      &:hover {
        color: orange;
        border-right: 1px solid #fff;
      }
      .iconfont {
        float: right;
        padding-right: 20px;
      }
    }
  }
  .city {
    display: none;
    padding-left: 20px;
    position: absolute;
    top: 0px;
    left: 258px;
    width: 350px;
    border: 1px solid #ddd;
    background: #fff;
    span {
      cursor: pointer;
    }
    .city_list {
      height: 38px;
      line-height: 38px;
      color: orange;
      a:hover {
        border-bottom: 1px solid orange;
      }
      .number {
        font-size: 24px;
        padding-right: 10px;
      }
    }

    .city_introduce {
      color: #9a9a9a;
      &:hover {
        border-bottom: 1px solid #9a9a9a;
      }
    }
  }
  .leftImg {
    margin-top: 20px;

    h4 {
      margin-bottom: 10px;
      font-weight: normal;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }
    img {
      width: 100%;
    }
  }
  .active {
    display: block;
  }
}
</style>